<template>
  <div>
    <el-form
      ref="authenticationFormRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      label-position="top"
    >   
      <div class="db-authentication">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="认证方式" prop="authMethod">
              <el-select
                v-model="formData.authMethod"
                placeholder="请选择认证方式"
                style="width: 100%"
              >
                <el-option label="用户名/密码" value="password" />
                <el-option label="Windows集成认证" value="windows" />
                <el-option label="LDAP认证" value="ldap" />
                <el-option label="Kerberos认证" value="kerberos" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加密方式" prop="encryption">
              <el-select
                v-model="formData.encryption"
                placeholder="请选择加密方式"
                style="width: 100%"
              >
                <el-option label="不加密" value="none" />
                <el-option label="SSL/TLS" value="ssl" />
                <el-option label="TLS 1.2" value="tls12" />
                <el-option label="TLS 1.3" value="tls13" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <template v-if="formData.authMethod === 'password'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="formData.username" placeholder="请输入数据库用户名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="formData.password"
                  type="password"
                  placeholder="请输入数据库密码"
                  show-password
                />
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <template v-if="formData.authMethod === 'ldap'">
          <el-form-item label="LDAP服务器" prop="ldapServer">
            <el-input v-model="formData.ldapServer" placeholder="请输入LDAP服务器地址" />
          </el-form-item>
          <el-form-item label="LDAP域" prop="ldapDomain">
            <el-input v-model="formData.ldapDomain" placeholder="请输入LDAP域" />
          </el-form-item>
        </template>

        <template v-if="formData.encryption !== 'none'">
          <el-divider content-position="left">SSL/TLS配置</el-divider>
          
          <el-form-item label="验证模式" prop="sslMode">
            <el-select
              v-model="formData.sslMode"
              placeholder="请选择SSL验证模式"
              style="width: 100%"
            >
              <el-option label="不验证" value="none" />
              <el-option label="验证CA" value="verify-ca" />
              <el-option label="完全验证" value="verify-full" />
            </el-select>
          </el-form-item>

          <template v-if="formData.sslMode !== 'none'">
            <el-form-item label="CA证书" prop="caCert">
              <el-input
                v-model="formData.caCert"
                type="textarea"
                :rows="3"
                placeholder="请输入CA证书内容(PEM格式)"
              />
            </el-form-item>
            
            <el-form-item label="客户端证书" prop="clientCert">
              <el-input
                v-model="formData.clientCert"
                type="textarea"
                :rows="3"
                placeholder="请输入客户端证书内容(PEM格式)"
              />
            </el-form-item>
            
            <el-form-item label="客户端密钥" prop="clientKey">
              <el-input
                v-model="formData.clientKey"
                type="textarea"
                :rows="3"
                placeholder="请输入客户端密钥内容(PEM格式)"
              />
            </el-form-item>
          </template>
        </template>

        <el-divider content-position="left">高级安全配置</el-divider>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="连接超时" prop="connectionTimeout">
              <el-input-number
                v-model="formData.connectionTimeout"
                :min="0"
                :max="300"
                controls-position="right"
              />
              <span style="margin-left: 8px">秒</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="命令超时" prop="commandTimeout">
              <el-input-number
                v-model="formData.commandTimeout"
                :min="0"
                :max="300"
                controls-position="right"
              />
              <span style="margin-left: 8px">秒</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="最小TLS版本" prop="minTlsVersion">
          <el-select
            v-model="formData.minTlsVersion"
            placeholder="请选择最小TLS版本"
            style="width: 100%"
          >
            <el-option label="TLS 1.0" value="1.0" />
            <el-option label="TLS 1.1" value="1.1" />
            <el-option label="TLS 1.2" value="1.2" />
            <el-option label="TLS 1.3" value="1.3" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import {DbAuthField} from '@/components/DataWorkflow/types/data-collect.ts';

const props = defineProps<{ 
  data: DbAuthField
}>()

const authenticationFormRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
  authMethod: [
    { required: true, message: '请选择认证方式', trigger: 'change' }
  ],
  encryption: [
    { required: true, message: '请选择加密方式', trigger: 'change' }
  ],
  username: [
    { 
      required: true, 
      message: '请输入用户名', 
      trigger: 'blur',
      validator: (_, value, callback) => {
        if (formData.value.authMethod === 'password' && !value) {
          callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      }
    }
  ],
  password: [
    { 
      required: true, 
      message: '请输入密码', 
      trigger: 'blur',
      validator: (_, value, callback) => {
        if (formData.value.authMethod === 'password' && !value) {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      }
    }
  ],
  ldapServer: [
    { 
      required: true, 
      message: '请输入LDAP服务器地址', 
      trigger: 'blur',
      validator: (_, value, callback) => {
        if (formData.value.authMethod === 'ldap' && !value) {
          callback(new Error('请输入LDAP服务器地址'))
        } else {
          callback()
        }
      }
    }
  ],
  sslMode: [
    { 
      required: true, 
      message: '请选择SSL验证模式', 
      trigger: 'change',
      validator: (_, value, callback) => {
        if (formData.value.encryption !== 'none' && !value) {
          callback(new Error('请选择SSL验证模式'))
        } else {
          callback()
        }
      }
    }
  ]
})

const formData = ref<DbAuthField>({ 
  authMethod: 'password',
  encryption: 'none',
  connectionTimeout: 30,
  commandTimeout: 30,
  minTlsVersion: '1.2',
  ...props.data 
})

watch(() => props.data, (val: DbAuthField) => {
  formData.value = { ...formData.value, ...val }
}, { immediate: true, deep: true })

const validate = async (): Promise<boolean> => {
  if (!authenticationFormRef.value) return false
  try {
    await authenticationFormRef.value.validate()
    return true
  } catch {
    return false
  }
}

const getData = (): DbAuthField => {
  return formData.value
}

defineExpose({
  validate,
  getData
})
</script>

<style scoped>
.db-authentication {
  padding: 0 10px;
}
</style>